import { color } from "highcharts";

let colorList = [
  "#4096ff",
  "#73d13d",
  "#ffc53d",
  "#36cfc9",
  "#9254de",
  "#f759ab",
  "#597ef7",
  "#a0d911",
  "#ffec3d",
  "#69b1ff",
  "#ffd666",
  "#95de64",
  "#b37feb",
  "#ff85c0",
  "#85a5ff",
  "#d3f261",
  "#fff566",
];
// 基础控件 【左面板】
export const basicComponents = [
  {
    icon: "icon-ym icon-ym-btn-preview",
    label: "搜索模块",
    keyName: "searchModel",
    title: "搜索模块",
    w: 12,
    h: 2,
    minW: 12,
    minH: 1,
    maxW: 12,
    maxH: 6,
  },
  {
    icon: "icon-ym icon-ym-generator-todo",
    label: "我的待办",
    keyName: "todo",
    title: "我的待办",
    w: 6,
    h: 4,
    minW: 6,
    minH: 4,
    maxW: 12,
    maxH: 6,
  },
  {
    icon: "icon-ym icon-ym-generator-function",
    label: "常用功能",
    keyName: "commonFunc",
    title: "常用功能",
    list: [
      {
        fullName: "功能设计",
        id: "85cd7bca426e49ce83a061bf461b1447",
        urlAddress: "onlineDev/webDesign",
        icon: "icon-ym icon-ym-webDesign",
        iconBackgroundColor: "#FF3B3B",
        type: 2,
      },
      {
        fullName: "流程设计",
        id: "fe0150960dd542ec9328067e4495074b",
        urlAddress: "workFlow/flowEngine",
        icon: "icon-ym icon-ym-flowDesign",
        iconBackgroundColor: "#7B1AE1",
        type: 2,
      },
      {
        fullName: "权限管理",
        id: "9057d797550e4457b7ddf2456ce45882",
        urlAddress: "permission/authorize",
        icon: "icon-ym icon-ym-authorize",
        iconBackgroundColor: "#1890FF",
        type: 2,
      },
      {
        fullName: "报表设计",
        id: "c7159f97177b420d9fc8ec8c74ae541b",
        urlAddress: "onlineDev/dataReport",
        icon: "icon-ym icon-ym-reportDesign",
        iconBackgroundColor: "#F68900",
        type: 2,
      },
      {
        fullName: "门户设计",
        id: "232d7226f00446d882e1e1bd999f7b2d",
        urlAddress: "onlineDev/visualPortal",
        icon: "icon-ym icon-ym-portalDesign",
        iconBackgroundColor: "#33B932",
        type: 2,
      },
    ],
    w: 6,
    h: 4,
    minW: 6,
    minH: 4,
    maxW: 12,
    maxH: 6,
  },
  {
    icon: "icon-ym icon-ym-generator-email",
    label: "待办工具",
    keyName: "backlog",
    jnpfKey: "backlog",
    title: "待办",
    w: 4,
    h: 7,
    minW: 4,
    minH: 7,
    maxW: 12,
    maxH: 7,
    dataType: "",
    propsApi: "",
    bisList: [
      {
        port: "",
      },
    ],
    selectValue: "",
  },
  // {
  //   icon: 'icon-ym icon-ym-generator-Panel',
  //   label: '数据面板',
  //   keyName: 'dataBoard',
  //   list: [{
  //     fullName: "新增客户（个）",
  //     num: 262,
  //     dataType: 'static',
  //     propsApi: '',
  //     icon: "icon-ym icon-ym-wf-contractApproval"
  //   },
  //   {
  //     fullName: "新增商机（个）",
  //     num: 199,
  //     dataType: 'static',
  //     propsApi: '',
  //     icon: "icon-ym icon-ym-wf-outgoingApply"
  //   },
  //   {
  //     fullName: "合同金额（元）",
  //     num: 126263.5,
  //     dataType: 'static',
  //     propsApi: '',
  //     icon: "icon-ym icon-ym-wf-payDistribution"
  //   },
  //   {
  //     fullName: "回款金额（元）",
  //     num: 6223.2,
  //     dataType: 'static',
  //     propsApi: '',
  //     icon: "icon-ym icon-ym-wf-incomeRecognition"
  //   }
  //   ],
  //   w: 12,
  //   h: 3,
  //   minW: 12,
  //   minH: 3,
  //   maxW: 12,
  //   maxH: 6
  // },
  {
    icon: "icon-ym icon-ym-generator-function",
    label: "常用菜单",
    keyName: "NewCommonMenu",
    title: "常用菜单",
    list: [],
    w: 6,
    h: 4,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 12,
  },
  {
    icon: "icon-ym icon-ym-generator-notice",
    label: "公告通知",
    keyName: "newNotice",
    title: "公告通知",
    w: 3,
    h: 7,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 7,
  },
  {
    icon: "icon-ym el-icon-user",
    label: "账户信息",
    keyName: "NewAccountInformation",
    title: "账户信息",
    w: 6,
    h: 2,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 7,
  },
  {
    icon: "icon-ym icon-ym-generator-function",
    label: "数据列表",
    keyName: "functionModule",
    title: "数据列表",
    list: [],
    w: 6,
    h: 4,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 12,
  },
  {
    icon: "icon-ym icon-ym-generator-function",
    label: "企业应用",
    keyName: "NewCommonApp",
    title: "企业应用",
    list: [
      {
        name: "荣科学院",
        urlAddress: "http://peixun.bringspring.com/",
        details: "集团内部培训平台，助力自我成长",
        img: require("../../../../assets/images/commonApp/app_img_1.png"),
      },
      {
        name: "固定资产",
        urlAddress: "https://gl.bringspring.com/jsbos-logistics/",
        details: "资产的入库、变更、盘点、二维码标签打印等",
        img: require("../../../../assets/images/commonApp/app_img_3.png"),
      },
      {
        name: "企业邮箱",
        urlAddress: "http://mail.bringspring.com/",
        details: "业务流程提报与审批",
        img: require("../../../../assets/images/commonApp/app_img_2.png"),
      },
      {
        name: "企业官网",
        urlAddress: "http://www.bringspring.com/",
        details: "企业官网",
        img: require("../../../../assets/images/commonApp/logo.png"),
      },
      {
        name: "控费管理",
        urlAddress: "https://wx2.ekuaibao.com/web/thirdparty.html",
        details: "费用管理",
        img: require("../../../../assets/images/commonApp/money.png"),
      },
    ],
    w: 6,
    h: 2,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 6,
  },
  {
    icon: "icon-ym icon-ym-generator-notice",
    label: "我的待办",
    keyName: "MyBeDealt",
    title: "我的待办",
    w: 3,
    h: 8,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 12,
  },

  {
    icon: "icon-ym icon-ym-generator-notice",
    label: "数据面板",
    keyName: "DataPanel",
    list: [],
    title: "数据面板",
    w: 12,
    h: 4,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 12,
  },
  {
    icon: "icon-ym el-icon-user",
    label: "工作签",
    keyName: "workPermit",
    title: "工作签",
    w: 6,
    h: 7,
    minW: 1,
    minH: 1,
    maxW: 12,
    maxH: 12,
  },
];
// 图表控件 【左面板】
export const chartComponents = [
  {
    icon: "icon-ym icon-ym-generator-bar",
    label: "柱状图",
    keyName: "barChart",
    title: "柱状图",
    dataType: "static",
    propsApi: "",
    option: {
      color: ["#2885FF", "#18B566", "#FF9900"],
      title: {
        text: "",
        subtext: "",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      legend: {
        show: true,
      },
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.5)",
            },
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(0, 0, 0, 0.5)",
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              // 分隔线
              type: "dashed", // 线的类型
              color: "#E8E8E8", // 分隔线颜色
            },
          },
        },
      ],
      series: [
        {
          name: "销售量",
          type: "bar",
          barMaxWidth: 20,
          data: [1012, 500, 800, 868, 653, 372, 100, 234, 421, 433, 122, 333],
          itemStyle: {
            barBorderRadius: [4, 4, 4, 4],
          },
        },
      ],
    },
    w: 6,
    h: 8,
    minW: 4,
    minH: 8,
    maxW: 12,
    maxH: 20,
  },
  {
    icon: "icon-ym icon-ym-generator-pie",
    label: "饼图",
    keyName: "pieChart",
    title: "饼图",
    dataType: "static",
    propsApi: "",
    option: {
      color: colorList,
      title: {
        text: "天气情况统计",
        subtext: "虚构数据",
        left: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: "center",
        data: ["西凉", "益州", "兖州", "荆州", "幽州"],
      },
      series: [
        {
          type: "pie",
          radius: "65%",
          center: ["50%", "50%"],
          labelLine: {
            show: false,
          },
          label: {
            show: false,
            position: "center",
          },
          selectedMode: "single",
          data: [
            {
              value: 1548,
              name: "幽州",
            },
            {
              value: 535,
              name: "荆州",
            },
            {
              value: 510,
              name: "兖州",
            },
            {
              value: 634,
              name: "益州",
            },
            {
              value: 735,
              name: "西凉",
            },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    },
    w: 6,
    h: 8,
    minW: 4,
    minH: 8,
    maxW: 12,
    maxH: 20,
  },
  {
    icon: "icon-ym icon-ym-generator-line",
    label: "折线图",
    keyName: "lineChart",
    title: "折线图",
    dataType: "static",
    propsApi: "",
    option: {
      color: colorList,
      title: {
        text: "",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        icon: "roundRect",
        data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0, 0, 0, 0.5)",
          },
        },
        splitLine: {
          // 坐标轴在 grid 区域中的分隔线。
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          show: false,
          lineStyle: {
            color: "rgba(0, 0, 0, 0.5)",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          // 坐标轴在 grid 区域中的分隔线
          lineStyle: {
            // 分隔线
            type: "dashed", // 线的类型
            color: "#E8E8E8", // 分隔线颜色
          },
        },
      },
      series: [
        {
          name: "邮件营销",
          type: "line",
          smooth: true,
          stack: "总量",
          data: [120, 132, 101, 134, 90, 230, 210],
          // itemStyle: {
          //   color: '#33b932'
          // }
        },
        {
          name: "联盟广告",
          type: "line",
          smooth: true,
          stack: "总量",
          data: [220, 182, 191, 234, 290, 330, 310],
          // itemStyle: {
          //   color: '#ff3b3b'
          // }
        },
        {
          name: "视频广告",
          type: "line",
          smooth: true,
          stack: "总量",
          data: [150, 232, 201, 154, 190, 330, 410],
          // itemStyle: {
          //   color: '#7b1ae1'
          // }
        },
        {
          name: "直接访问",
          type: "line",
          smooth: true,
          stack: "总量",
          data: [320, 332, 301, 334, 390, 330, 320],
          // itemStyle: {
          //   color: '#1890ff'
          // }
        },
        {
          name: "搜索引擎",
          type: "line",
          smooth: true,
          stack: "总量",
          data: [820, 932, 901, 934, 1290, 130, 1320],
          // itemStyle: {
          //   color: '#f68900'
          // }
        },
      ],
    },
    w: 6,
    h: 8,
    minW: 4,
    minH: 8,
    maxW: 12,
    maxH: 20,
  },
  {
    icon: "icon-ym icon-ym-generator-annular",
    label: "环形图",
    keyName: "annularChart",
    title: "环形图",
    dataType: "static",
    propsApi: "",
    option: {
      color: colorList,
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        right: 10,
        y: "center",
        pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
        pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
        pageIconSize: 12, //翻页按钮大小
        textStyle: {
          width: "30px",
        },
        formatter: function (name) {
          return name.length > 5 ? name.substr(0, 5) + "..." : name;
        },
        data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          center: ["35%", "50%"],
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "14",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: 335,
              name: "直接访问",
            },
            {
              value: 310,
              name: "邮件营销",
            },
            {
              value: 234,
              name: "联盟广告",
            },
            {
              value: 135,
              name: "视频广告",
            },
            {
              value: 1548,
              name: "搜索引擎",
            },
          ],
        },
      ],
    },
    w: 6,
    h: 8,
    minW: 4,
    minH: 8,
    maxW: 12,
    maxH: 20,
  },
  // {
  //   icon: 'icon-ym icon-ym-generator-area',
  //   label: '面积图',
  //   keyName: 'areaChart',
  //   title: '面积图',
  //   dataType: 'static',
  //   propsApi: '',
  //   option: {
  //     xAxis: {
  //       type: 'category',
  //       boundaryGap: false,
  //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //     },
  //     yAxis: {
  //       type: 'value'
  //     },
  //     series: [{
  //       data: [820, 932, 901, 934, 1290, 1330, 1320],
  //       type: 'line',
  //       areaStyle: {
  //         color: '#d0e2f3'
  //       },
  //       itemStyle: {
  //         normal: {
  //           color: '#1890FF',
  //           lineStyle: {
  //             color: '#1890FF'
  //           }
  //         }
  //       },
  //     }]
  //   },
  //   w: 6,
  //   h: 8,
  //   minW: 4,
  //   minH: 8,
  //   maxW: 12,
  //   maxH: 20
  // },
  {
    icon: "icon-ym icon-ym-generator-radar",
    label: "雷达图",
    keyName: "radarChart",
    title: "雷达图",
    dataType: "static",
    propsApi: "",
    color: colorList,
    option: {
      title: {
        text: "",
      },
      tooltip: {},
      legend: {
        data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"],
      },
      radar: {
        // shape: 'circle',
        splitArea: {
          areaStyle: {
            color: [
              "rgba(255, 255, 255, 0.2)",
              "rgba(255, 255, 255, 0.4)",
              "rgba(255, 255, 255, 0.6)",
              "rgba(255, 255, 255, 0.8)",
              "rgba(255, 255, 255, 1)",
            ],
          },
        },
        name: {
          textStyle: {
            color: "#666",
            // backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5],
          },
        },
        indicator: [
          {
            name: "指标1",
            max: 6500,
          },
          {
            name: "指标2",
            max: 16000,
          },
          {
            name: "指标3",
            max: 30000,
          },
          {
            name: "指标4",
            max: 38000,
          },
          {
            name: "指标5",
            max: 52000,
          },
          {
            name: "指标6",
            max: 25000,
          },
        ],
      },
      series: [
        {
          name: "预算 vs 开销（Budget vs spending）",
          type: "radar",
          // areaStyle: {normal: {}},
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000, 19000],
              name: "预算分配（Allocated Budget）",
              itemStyle: {
                color: "#4096ff",
              },
              areaStyle: {
                // color: 'rgba(64, 150, 255, 0.5)',
                color: "#4096ff",
                opacity: 0.3,
              },
            },
            {
              value: [5000, 14000, 28000, 31000, 42000, 21000],
              name: "实际开销（Actual Spending）",
              itemStyle: {
                color: "#73d13d",
              },
              areaStyle: {
                // color: 'rgba(115, 209, 61, 0.5)',
                color: "#73d13d",
                opacity: 0.3,
              },
            },
          ],
        },
      ],
    },
    w: 6,
    h: 8,
    minW: 4,
    minH: 8,
    maxW: 12,
    maxH: 20,
  },
];
